import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import { SearchBar, Grid, Tag,Tabs, Toast } from 'antd-mobile'
import './detail.less'
import kefu from '../../assets/img/kefu.png'
import shoper from '../../assets/img/shoper.png'
import buycart from '../../assets/img/buycart.png'
import { imgPre } from '../../request/http'
import { Link } from 'react-router-dom'


import {reqinfo,reqcartadd} from '../../request/api'
export default class Detail extends Component {
  constructor(){
    super()
    this.state={
      info:{},
      arr:['商品','评价','详情','推荐'],
    }
    // ref
    this.des=React.createRef()
  }
  componentDidMount(){//动态路由接参
    let params =this.props.match.params;
    // console.log(params.id);
    reqinfo({id:params.id}).then(d=>{
        if(d.data.code==200){
          let obj=d.data.list[0];
          this.setState({
            info:obj,
          },
          ()=>{
            //给节点赋值
            this.des.current.innerHTML=this.state.info.description
          }
          )
        }
    })

  }
  change(){
    reqcartadd({
      uid:JSON.parse(localStorage.getItem('isLogin')).uid,//获取uid
      type:1,
      goodsid:this.state.info.id,
      num:1
    }).then(d=>{
       if(d.data.code==200){
         //添加成功
         Toast.show({
           content:d.data.msg
         })
       }
    })
  }
  render() {
    let{info,arr}=this.state
    return (
      <div>
        <Header title={info.goodsname} back></Header>
        <div className='detalnav'>
        <Tabs>
          {
            arr.map((item,index)=>{
                  return(
                    <Tabs.Tab title={item} key={index} />
                  )
            })
          }
        </Tabs>
        <div className='detailshop'>
            <img src={imgPre+info.img} alt="" />
            <h3>商品名称:{info.goodsname}</h3>
             <p>价格：{info.price} <span>市场价:{info.market_price}</span></p>
             <div ref={this.des}></div>

        </div>
        </div>

        {/* 底部 */}
        <div className="footers">
        <Grid columns={7} gap={8}>
          <Grid.Item>
            <img src={kefu} alt="" />
          </Grid.Item>
          <Grid.Item>
            <img src={shoper} alt="" />
          </Grid.Item>
          <Grid.Item>
            <img src={buycart} alt="" />
          </Grid.Item>
          <Grid.Item span={2}>
               <span onClick={()=>{this.change()}}>加入购物车</span>
          </Grid.Item>
          <Grid.Item span={2}>
               <span className='buys'>立即购买</span>
          </Grid.Item>
         
        </Grid>
        </div>
      </div>
    )
  }
}
